<template>
	<div>
		
		<Grid :col="1" :border="false" padding="5px" v-auth:job:view:add>
			<GridItem><Button icon="md-add-circle" type="primary" @click="drawer = true;title = '新增岗位'">新增岗位</Button></GridItem>
		</Grid>
		
		 <!-- 引入表格 -->
		 <Table border :columns="columns" :data="data" row-key="id">
			
			<template #action="{ row, index }">
				<Button type="primary" icon="ios-create-outline" size="small"
                v-auth:job:view:modify
                style="margin-right: 5px" @click="modify(row)">修改</Button>
				<Button type="error" icon="ios-remove-circle-outline" v-auth:job:view:remove
						size="small" @click="remove(row)">移除</Button>
			</template>
			
			<template #status="{ row, index }">
				<DotTag type="primary" v-if="row.status">正常</DotTag>
				<DotTag type="error" v-else>失效</DotTag>
			</template>
		 </Table>
		
		<Drawer
			:title="title"
			v-model="drawer"
      @on-close="closeWin"
      v-if="drawer"
			width="720"
			:mask-closable="false"
			:styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
			
			<!-- 引入菜单表单组件 -->
			<PositionForm
          :row="positionRow"
          @close-win="closeWin"></PositionForm>
		</Drawer>
		
	</div>
</template>
<script>
import PositionForm from '../components/PositionForm.vue'
import DotTag from '../components/DotTag.vue'
export default {
    data () {
        return {
          title: '',
          drawer: false,
          positionRow: {},
          columns: [
             {title: '岗位名', key: 'name', width: 200},
             {title: '岗位描述',key: 'description'},
             {title: '状态',key: 'status', slot: 'status', width: 100},
             {title: '操作',slot: 'action',width: 200,align: 'center'}
          ],
          data: [],
        }
    },
    created(){
       this.showData();
    },
    methods: {
      modify(row) {
         this.title = "修改岗位" ;
         this.drawer = true ;
         this.positionRow = {
            id : row.id,
            name : row.name ,
            description: row.description ,
            status: row.status
         }
      },
      remove (row) {
        this.$Modal.confirm({
          title: '提示',
          content: `您确定要删除该岗位吗?`,
          onOk: () => {
            this.$api.removePosition(row.id).then(({data:ret})=> {
              if(ret.status === "10000") {
                this.$Message.success({background: true, content:'数据移除成功'});
                this.showData();
              }else{
                this.$Message.error({background: true, content: ret.message});
              }
            })
          }
        })

      },
      closeWin(flag) {
         if(flag) this.showData();
         this.drawer = false ;
         this.positionRow = {} ;
      },
      showData() { // 查询所有的数据
         this.$api.queryPositionList().then(({data:ret})=> {
            if (ret.status == "10000") this.data = ret.data ;
         })
      }
    },
    components: {
      PositionForm,
      DotTag,
    }
}
</script>
